<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
	<title>开始考试</title>
	<script type="text/javascript" src="/js/flexible.js?r=2016082215"></script>
    <link rel="stylesheet" href="/style/appHtmlStyle.css?r=2016082215" media="all"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
</head>
<body class="chapter4">
	<header>
		<img src="/style/images/exam/start-exam.png"/>
	</header>
	<div class="cont">
		<h4>答题规则：</h4>
		<ul>
			 <li>
			 	1.本次答题无时间限制。
			 </li>
			 <li>
			 	2.共15道题目，包含10道单选题，5道多选题，必须全部答对才算完成考试。
			 </li>
			 <li>
			 	3.通过考试后才能成为捎货人
			 </li>
			 <li>
			 	4.请认真阅读我们的学习资料，并保持一个良好的心态。
			 </li>
		</ul>
	</div>
 	<div class="btn">
 		<a href="javascript:$('.questions').show();">开始答题</a> 
 	</div>
 	<div class="hide questions">
 		<div class="title">
 			<img src="/style/images/exam/start.png">
 		</div>
 		<form id="form">
 			<?php
 				$questionHtml = '';
 				foreach ($examItems as $key => $value) {
 					$type = '单选题';
 					$typeClass = 'radio';
 					if ($value['type'] == 1) {
 						$type = '多选题';
 						$typeClass = 'checkbox';
 					}
 					$answerHtml = '';
 					$answerArr = explode('|', $value['options']);
 					foreach ($answerArr as $_k => $_v) {
 						$answerHtml .= '<li>
						 					<div class="fl index">
						 						<div class="check-btn">
							 						<div class="white">
							 							<div class="solid"></div>
							 						</div>
						 						</div>
						 					</div>
						 					<div class="fl answer">
						 						<span>'. $_v .'</span> 
						 					</div>
						 					<div class="clear"></div>
						 				</li>';
 					}
 					$questionHtml .= '<div class="item">';
					$questionHtml .= '<h3>'.($key + 1) .'、('. $type .')'. $value['title'] .'</h3>';
					$questionHtml .= '<ul class="'. $typeClass .'" data-index="'. $value['sp_id'] .'">';
					$questionHtml .= $answerHtml;
					$questionHtml .= '</ul></div>';
 				}
 				echo $questionHtml;
 			?>
	 	</form>
	 	<div class="btn">
	 		<a href="javascript:sumitAnswer();">提交答卷</a>
	 	</div>
 	</div>
 	<div class="hide answer-complete">
 		<div class="title">
 			<img src="/style/images/exam/pass.png">
 		</div>
 		<h2 class="text-center">恭喜您，考试已通过，快去接单吧！</h2>
 		<div class="btn">
 			<a href="javascript:jump2ShippingList();">马上接单</a>
 		</div>
 	</div>
 	<div class="hide answer-err">
 		<div class="title">
 			<img src="/style/images/exam/unpass.png">
 		</div>
 		<div class="h2-warp">
 			<h2 class="text-center">未通过考试！别灰心，看看自己哪些题错了吧</h2>
 		</div>
 		<div class="questions err-question">
	 	</div>
 		<div class="btn multi-btn">
 		<a class="lightly fl" href="/api/exam/index?uid=<?php echo $uid;?>">返回学习</a>
 		<a class="fr" href="/api/exam/chapter4?uid=<?php echo $uid;?>">重新考试</a>
 		<div class="clear"></div>
 	</div>
 	</div>
	<script type="text/javascript">
		var uid = <?php echo $uid;?>;
		var questionsArr = <?php echo json_encode($examItems);?>;
		var questionsObj = {};
		for (var i in questionsArr) {
			questionsObj[questionsArr[i]['sp_id']] = [];
		}
	    $("#form .item ul li").click(function(){
	    	var questionIndex = $(this).parents("ul").attr("data-index");
	    	var answerIndex = $(this).index() + 1;
	    	var objIndex = questionsObj[questionIndex].indexOf(answerIndex);

	    	if ($(this).hasClass('checked')) {
	    		if (!$(this).parents("ul").hasClass('radio')) {
	    			for(var item in questionsObj[questionIndex]){
			    	if (questionsObj[questionIndex][item] == answerIndex) {
			    			questionsObj[questionIndex].splice(item, 1);
			    		}
			    	}
		    		$(this).removeClass('checked');
		    		$(this).find('.answer').val('0');
		    		//questionsObj[questionIndex].shift(objIndex);
	    		}
	    	} else {
	    		if ($(this).parents("ul").hasClass('radio')) {
	    			$(this).siblings("li").removeClass('checked');
	    			$(this).siblings("li").find('.answer').val('0');
		    		questionsObj[questionIndex].shift(objIndex);
	    		}
	    		$(this).addClass('checked');
	    		$(this).find('.answer').val('1');
		    	questionsObj[questionIndex].push(answerIndex);
	    	}
	    });
	    var itemTpl = '<div class="item">'
		 			+'<h3>_INDEX_、_TITLE_</h3>'
		 			+ '<ul class="radio" data-index="question__QUESTID_">_ANSWER_</ul>'
		 			+ '</div>';
	 	var answerTpl = '<li_ISRIGHT_>'
	 					+'<div class="fl index">'
	 					+ '<div class="check-btn">'
	 					+ '<div class="white">'
	 					+ '		<div class="solid"></div>'
	 					+ '	</div>'
	 					+ '</div>'
	 					+'</div>'
	 					+ '<div class="fl answer">'
	 					+ '	<span>_ANSWER_TITLE_</span>'
	 					+ '</div>'
	 					+ '<div class="clear"></div>'
	 				+ '</li>';
	    var sumitAnswer = function(){
	    	//console.log(questionsObj);
	    	for (var i in questionsObj) {
	    		if (questionsObj[i].length == 0) {
	    			tipsDialog('请选择完整再提交');
	    			return;
	    		}
	    	}
	    	tipsDialog('正在检查题目，请稍等!');
	    	$.post("/api/exam/check", {items: questionsObj, uid: uid}, function(result){
	    		if (result.errcode == 0) {
	    			//答对
	    			$('.hide').hide();
	    			$('.answer-complete').show();
	    		} else if(result.errcode == 8041){
	    			//答错
					$('.hide').hide();
					var errItems = result.data.err_item;
					var questionItem='';
					var errIndex = 0;
					for(var i in errItems) {
						++errIndex;
						var answerItem='';
						var answerArr = errItems[i]['options'].split('|');
						for(var j in answerArr){
							var indexAnswer = parseInt(j);
							var answer = parseInt(errItems[i]['answer']);
							var isRight = '';
	 						if ((answer>>indexAnswer)&1 === 1) {
	 							isRight = ' class="checked"';
	 						}
							answerItem += answerTpl.replace('_ANSWER_TITLE_', answerArr[j])
							.replace('_ISRIGHT_', isRight);
						}
						questionItem += itemTpl.replace('_INDEX_', errIndex)
								.replace('_TITLE_', errItems[i]['title'])
								.replace('_QUESTID_', errItems[i]['eid'])
								.replace('_ANSWER_', answerItem);
					}
					$('.answer-err .err-question').html(questionItem);
					$('.answer-err').show();
	    		} else {
	    			//其他错误
	    			tipsDialog(result.errmsg);
	    		}
	    	},'json');
	    }
	</script>
	<script type="text/javascript" src="/js/exam.js"></script>
</body>
</html>